<template>
	<div class='home-child'>
		<TopNav
			showInform
			showAvatar
			navName="改造教程"
			color="#00493E"
			msgColor="#01937C"
		/>
		<div class="container">
			<div class="pickers">
				<div
					class="type"
					v-for="item in types"
					:key="item.key"
				>
					<Button
						:bgColor="selectType === item.key ? '#00C9A9' :' #EFF3F3'"
						:color="selectType === item.key ? '#FFFFFF' :' rgba(0, 0, 0, 0.55)'"
						height="48"
						width="160"
						@click="selectType=item.key;selectTagId=0"
					>
						{{item.label}}
					</Button>
				</div>
			</div>
			<div class="pickers">
				<div
					class="tag"
					v-for="tag in types.find(item => item.key === selectType).tags"
					:key="tag.id"
				>
					<Button
						width="110"
						height="110"
						:bgColor="selectTagId === tag.id ? '#00C9A9' :' #EFF3F3'"
						:color="selectTagId === tag.id ? '#FFFFFF' :' rgba(0, 62, 52, 0.7)'"
						@click="onclickTag(tag.id)"
					>
						<img
							style="width: 80px; height: 80px;"
							:src="tag.img"
						>
					</Button>
					<div class="name">
						{{tag.name}}
					</div>
				</div>
			</div>

			<div class="course">
				<CourseList
					size="300"
					column="4"
					:filterTag="[selectTagId]"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import Toys from '@/mock/toys'
import Interest from '@/mock/interest'

export default {
  data() {
    return {
      types: [
        { label: '玩具类别', tags: Toys, key: 'selectToy' },
        { label: '改造方向', tags: Interest, key: 'selectInterest' },
      ],
      selectType: 'selectToy',
      selectTagId: 0,
    }
  },
  computed: {
    activeType() {
      return function(key, tag) {
        console.log(key)
        return this[ key ] === tag.id
      }
    }
  },
  methods: {
    onclickTag(id) {
      const val = this.selectTagId

      if (val === id) {
        this.selectTagId = 0
      } else {
        this.selectTagId = id
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.home-child {
  padding-top: 85px;
  background-color: #eff3f3;

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    background-color: #ffffff;
    border-radius: 30px 30px 0 0;

    .pickers {
      display: flex;

      .type {
        margin-bottom: 20px;
        margin-left: 28px;
      }

      .tag {
        margin-left: 12px;
        text-align: center;

        .name {
          margin-top: 12px;
          font-size: $sMini;
          color: $color1;
        }

        img {
          object-fit: contain;
        }
      }
    }

    .course {
      margin-top: 40px;
    }
  }
}
</style>
